<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fabric.js</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        place-content: center;
      }
      #c {
        border: 1px solid #ccc;
        box-sizing: border-box;
        margin: 0 auto;
      }
    </style>
  </head>

  <body>
    <canvas id="c" width="800" height="600"></canvas>

    <script src="../JS资源/fabric.js"></script>
    <script>
      // StaticCanvas
      const canvas = new fabric.Canvas('c', {
        // backgroundColor: '#eae9ed',
        containerClass: 'my-fabric-box',
        // overlayColor: '#f6416c',
        // isDrawingMode: true,
      }); // 使用 fabric 绑定画布，将画布的id传入 fabric.Canvas 方法里
      console.log('==fabric-canvas====>', canvas);
      /*
       * 创建矩形元素
       * top和left: 设置矩形左上角所在的位置（相对于画布左上角）
       * width和height: 设置矩形的宽高
       * fill: 填充色（默认黑色）
       */
      const rect = new fabric.Rect({
        top: 100,
        left: 100,
        // originX: 'center',
        // originY: 'center',
        width: 200, // 宽 100px
        height: 200, // 高 60px
        fill: 'red', // 填充 红色
        stroke: 'blue',
        strokeWidth: 5,
        strokeDashArray: [5],
        strokeUniform: true, // 固定边框宽度
        strokeDashOffset: 4, // 逆时针偏移
        rx: 20, // 只设置了rx，那么ry的值也是10
        angle: 10, // 旋转10度
        scaleX: 1.5, // x轴方向放大2倍
        scaleY: 1.5, // y轴方向放大2倍
      });

      canvas.setDimensions({
        width: window.innerWidth * 0.9,
        height: window.innerHeight * 0.9,
      });

      // 将矩形添加到画布中
      canvas.add(rect);
    </script>
  </body>
</html>
